<template >
  <el-container style="height: 100%;" direction="vertical">
      <AppHeader/>
    <el-container >
      <el-aside width="180px">
        <el-menu close-on-click-moda="false" :default-active="$route.path"  background-color="#545c64" text-color="#fffs" active-text-color="#76F8FF"  router>
          <el-menu-item v-for="menu in menus" :index="menu.route" :key="menu.route" v-if="!menu.children">
            <i class="el-icon-menu"></i>{{menu.name}}
          </el-menu-item>
          <el-submenu active-text-color="" unique-opened="false" v-for="menu in menus" :index="menu.route" :key="menu.route" v-if="menu.children">
            <template slot="title"><i  class="el-icon-menu"></i>{{menu.name}}</template>
            <el-menu-item :index="item.route" v-for="item in menu.children" :key="item.route"> <i  class="el-icon-location"></i>{{item.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-tabs  v-model="activeIndex" type="border-card" closable v-on:tab-click="tabClick" v-if="options.length" @tab-remove="tabRemove" style="width: 100%">
        <el-tab-pane :key="item.name" v-for="(item, index) in options" :label="item.name" :name="item.route">
          <keep-alive style="height: 100%;width: 100%">
            <router-view/>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
<!--          <div class="content-wrap">

          </div>-->
    </el-container>
  </el-container>
</template>

<style scoped>
  .el-tab-pane {
  }
  .el-aside {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-menu{
    border-right-width: 0px;
    text-align: -moz-left;
    margin: 0;
    padding: 0;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

</style>

<script>
  import AppHeader from '@/components/AppHeader'
  export default {
    components:{
      AppHeader,
    },
    data() {
      return {
        menus: [
          { route: '/realTime', name: '实时监控' , children:false},
          { route: '/AppBar2', name: '配置管理', children: [{ route: '/env', name: '环境配置' }, { route: '/mysqlManage', name: '数据库配置' }] },
          { route: '/AppBar3', name: '接口管理', children: [{ route: '/CaseManage', name: '接口用例' }, { route: '/RunHistroy', name: '历史记录' }, { route: '/batch', name: '批次查询' }, { route: '/timeTask', name: '定时任务' }] },
          { route: '/AppBar4', name: '系统管理', children: [{ route: '/UserManage', name: '用户管理' }, { route: '/DepartManage', name: '组织管理' }] },
        ]
      }
    },
    watch: {
      $route(to) {
        console.log(to.path)
        let flag = false;//判断是否页面中是否已经存在该路由下的tab页
        //options记录当前页面中已存在的tab页
        for (let option of this.options) {
          //用名称匹配，如果存在即将对应的tab页设置为active显示桌面前端
          if (option.name === to.name) {
            flag = true;
            this.$store.commit('set_active_index', '/' + to.path.split('/')[1]);
            break;
          }
        }
        //如果不存在，则新增tab页，再将新增的tab页设置为active显示在桌面前端
        if (!flag) {
          this.$store.commit('add_tabs', { route: '/' + to.path.split('/')[1], name: to.name });
          this.$store.commit('set_active_index', '/' + to.path.split('/')[1]);
        }

      }
    },
    methods: {
      // tab切换时，动态的切换路由
      tabClick(tab) {
        let path = this.activeIndex;
   /*     // 用户详情页的时候，对应了二级路由，需要拼接添加第二级路由
        if (this.activeIndex === '') {
          path = this.activeIndex + '/' + this.$store.state.userInfo.name;
        }*/
        this.$router.push({ path: path });//路由跳转
      },
      tabRemove(targetName) {
        //将改tab从options里移除
        this.$store.commit('delete_tabs', targetName);
        //还同时需要处理一种情况当需要移除的页面为当前激活的页面时，将上一个tab页作为激活tab
        if (this.activeIndex === targetName) {
          // 设置当前激活的路由
          if (this.options && this.options.length >= 1) {
            this.$store.commit('set_active_index', this.options[this.options.length - 1].route);
            this.$router.push({ path: this.activeIndex });
          } else {
            this.$router.push({ path: '/' });
          }
        }
      }
    },
    computed: {
      options() {
        return this.$store.state.options;
      },
      //动态设置及获取当前激活的tab页
        activeIndex: {
        get() {
          return this.$store.state.activeIndex;
        },
        set(val) {
          this.$store.commit('set_active_index', val);
        }
      }
    },

  }
</script>
